<template>
  <div>
    <div id="echartstool"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, defineProps,ref, watch ,nextTick} from "vue";
let arrjdbglist=ref([])
let arrdbbglist=ref([])
const result=ref([])
const resultarr = ref([])
const props = defineProps({
   jdbglist:Array,
  dbbglist: Array,
  
})
 console.log(props.menutoolpro,'prrrrrrrrrrrrrrrrrrrrrr');
 
  arrjdbglist.value=props.jdbglist.slice(1)
  arrdbbglist.value = props.dbbglist.slice(1)
  result.value = arrdbbglist.value.map((element, index) => element - arrjdbglist.value[index]);
  resultarr.value = result.value.map((element, index) => element + arrdbbglist.value[index]);


  let mychart = echarts.init(document.querySelector("#echartstool")); 
  var option;
  // 图例数据
  var legendData= ['管道线','井底标高线','地表标高线','管道','全选']
  let selected = {};
  for (let i = 0; i < legendData.length; i++) {
    selected[legendData[i]] = true;
  }
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      // formatter: function (params) {
      //   var tar = params[0];
      // // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
      // },
    },
    // 图例↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    legend: {
      type: "plain",
      // orient: "vertical",
      left: 100,
      top: 20,
      data:legendData,
      selected: {
        全选:true,
        管道线:true,
        井底标高线:true,
        地表标高线:true,
        11:false
      },
      selectedMode: 'multiple', // 开启多选模式
      textStyle: {
        color: "#000",
        fontSize: 16,
      }
    },
    // 滚动条↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    dataZoom: [
          {
            filterMode: 'empty',
            type: 'slider',
            show: true,
            handleSize: 20, // 滑动条的 左右2个滑动条的大小
            height: 20, // 组件高度
            bottom: 20, // 右边的距离
            handleColor: '#ddd', // h滑动图标的颜色
            handleStyle: { // 两侧缩放手柄的样式配置。
              borderColor: '#cacaca',
            borderWidth: '1',
              shadowBlur: 2,
              background: '#ddd',
              shadowColor: '#ddd',
            },
            backgroundColor: 'white', // 两边未选中的滑动条区域的颜色
          },
          // 下面这个属性是拖到里面
          {
            type: 'inside',
            show: true,
            start: 1,
            end: 100,
          },
              // 竖型滚动条
      {
        type: "slider",
        width:20,
        show: true,
        yAxisIndex: [0],
        // left: "93%",
        start: 0,
        end: 100,
      },
        ],
        // 图的位置
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
        // show:true,
        // data:[0,1],
      type: "category",
      splitLine: { show: false },
            splitLine: { // 表格里面X轴线条
              show: true
            }
    },
    yAxis: {
      type: "value",
    },
    series: [
  
      {
        barWidth: 20, //柱子宽度
        type: "bar",
        stack: "Total",
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
        emphasis: {
          itemStyle: {
            borderColor: "#ccc",
            color: "#ccc",
          },
        },
        //   底部高度
        // data: [1.5, 1.31,1.4],
        data:arrdbbglist.value,
      },
       // 竖向柱状图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
       {
        name: "管道线",
      type: "bar",
        stack: "Total",
        itemStyle: {
          borderColor: "#f50",
          color: "#f50",
        },
        label: {
          // show: true,
          position: 'top'
      },
        //   高度
        data:result.value,
        // data:[1.35,1.5,1.4],
      },
        // 横向柱状图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

    
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total2',
      showSymbol: false,//是否默认展示圆点
      areaStyle: {},
      itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      emphasis: {
        focus: 'series'
      },
      // data: [1.5,1.5,1.5]
      data: arrdbbglist.value,
    },
    {
      name: '管道',
      type: 'line',
      showSymbol: false,//是否默认展示圆点
      stack: 'Total2',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
      focus: 'series'
      },
      // data: [ 0.4, 0.4,0.4]
     
    },
    
      // 折线图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      {
        name:'井底标高线',
          data: arrdbbglist.value,
          // data: result.value,
         // data: [2.85,2.81,2.8],
          type: 'line',
          showSymbol: false,//是否默认展示圆点
          itemStyle: {
            normal: {
            lineStyle: {
               type: 'dashed',
                width: 1,//折线宽度
                color: "#F50"//折线颜色
              },
            },
           
          },
        },
        // 折线图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      {
         name:'地表标高线',
          // data: [1.5,1.31,1.4],
          data: resultarr.value,
          
          type: 'line',
          showSymbol: false,//是否默认展示圆点
          itemStyle: {
            normal: {
              lineStyle: {
                type: 'dashed',
                width: 1,//折线宽度
               color: "#F50"//折线颜色
              },
            },
          },
        },
          {//全选按钮的假数据
            name:'全选',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 10,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                  shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#fb7636',
                }
            },
            itemStyle: {
                color: '#00FFF0',
                borderColor: "#fff",
                borderWidth: 2,
            },

          data: []
        },
    ],
  };
  mychart.setOption(option);
  //增加全选功能
  mychart.on("legendselectchanged", e => {
    let name = e.name;
    let allSelect = "全选";
    if (name === allSelect) {
      //全选的点击事件
      for (let key in e.selected) {
        option.legend.selected[key] = e.selected[allSelect];
      }
    } else {
      //普通多选框的点击事件
      option.legend.selected[name] = e.selected[name];
      if (e.selected.name == false) {
        // 当前选中设置为false时
        option.legend.selected[allSelect] = false;
      } else {
        // 当前选中设置为true时
        let arr = Object.values(e.selected).splice(1);
        let flag = arr.every(currentValue => {
          return currentValue == true;
        });
        option.legend.selected[allSelect] = flag;
      }
    }
    mychart.setOption(option);
  });
   mychart.setOption(option);

</script>

<style scoped>
#echartstool {
  width: 900px;
  height: 370px;
}
#Select-all{
  width: 50px;
  height: 30px;
  border-radius: 20px;
position: absolute;
top: 74px;
left: 660px;
}
#Inverse{
  width: 50px;
  height: 30px;
  border-radius: 20px;
position: absolute;
top: 74px;
left: 720px;
}
</style>